<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>鲸鱼音乐</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<style>
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 50px;
	}

	.header img {
		margin-right: 10px;
		/* 调整图片与文字之间的间距 */
	}

	.ti {
		color: rgb(44, 41, 41);
		font-size: 40px;
		text-align: center;
	}
</style>

<body>

	<div class="page-info">22215220413+陈萌霖</div>
	<!-- <div class="page-info">23215220135+苟露</div> -->


	<div align="center" class="header">
		<img src="images/jingyu.png" width="70px" height="70px">
		<p class="ti">鲸鱼音乐</p>
	</div>



	<div id="music-box">
		<div class="left-box">
			<table>
				<thead>
					<tr>
						<th>歌名</th>
						<th>歌手</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<div class="right-box">
			<div id="lyric">
				<p></p>
				<p></p>
				<p></p>
				<p></p>
				<p></p>
				<p></p>
			</div>
		</div>
		<div class="foot-box">
			<audio src="" autoplay="autoplay"></audio>
			<div id="play-progress">
				<div class="time-bar">
					<span id="song">童话镇</span>
					<span id="singer">（陈一发）</span>
					<div id="line1"></div>
					<div id="circle"></div>
					<div id="line"></div>
					<span id="cur-time">00:00&nbsp</span>
					<span id="end-time">/&nbsp00:00</span>
				</div>
				<div id="order-repeat">
					<span class="glyphicon glyphicon-menu-hamburger" id="order"></span>
					<span class="glyphicon glyphicon-repeat" id="repeat"></span>
				</div>
				<div id="volume-up-off">
					<span class="glyphicon glyphicon-volume-up" id="volume-up"></span>
					<span class="glyphicon glyphicon-volume-off" id="volume-off"></span>
				</div>

			</div>
			<div class="play-operation">
				<span class="glyphicon glyphicon-backward" id="prev"></span>
				<div id="play-pause">
					<span class="glyphicon glyphicon-play" id="play"></span>
					<span class="glyphicon glyphicon-pause" id="pause"></span>
				</div>
				<span class="glyphicon glyphicon-forward" id="next"></span>
			</div>
		</div>
	</div>
	<script src="js/event.js"></script>
	<script src="js/fun.js"></script>
	<script src="js/lrc.js"></script>
</body>

</html>